<template>
  <div class="table-box">
      <div class="table-search">
          <el-form :inline="true" :model="form">
              <el-form-item>
                  <el-input v-model="form.merchant_id" placeholder="商户ID" />
              </el-form-item>
              <el-form-item>
                  <el-input v-model="form.merchant_name" placeholder="商户名称" />
              </el-form-item>
              <el-form-item>
                  <el-input v-model="form.card_id" placeholder="卡片ID" />
              </el-form-item>
              <el-form-item>
                  <el-input v-model="form.card_number" placeholder="卡号" />
              </el-form-item>
              <el-form-item>
                  <el-select v-model="form.is_settled" placeholder="审核状态">
                      <el-option label="待审核" value="0" />
                      <el-option label="通过" value="1" />
                      <el-option label="拒绝" value="2" />
                  </el-select>
              </el-form-item>
              <el-form-item>
                  <el-date-picker clearable v-model="form.timeData" type="datetimerange" range-separator="至"
                      start-placeholder="开始日期" end-placeholder="截止日期" :default-time="pickerDefaultTime" />
              </el-form-item>
              <el-form-item>
                  <el-button type="primary" @click="onQuery">查询</el-button>
                  <el-button @click="onReset">重置</el-button>
              </el-form-item>
          </el-form>
      </div>
      <div class="card content-box">
          <div class="table">
              <el-table :data="tableData" border v-loading="loading">
                  <el-table-column prop="id" label="id" align="center" width="60" />
                  <el-table-column prop="merchant_id" label="商户id" align="center" width="120" />
                  <el-table-column prop="merchant_name" label="商户名称" align="center" width="150" />
                  <el-table-column prop="card_id" label="卡片ID" align="center" width="200" />
                  <el-table-column prop="card_number" label="卡号" align="center" width="150" />
                  <el-table-column prop="operate_type" label="申请类型" align="center" />
                  <el-table-column prop="before_operate_type" label="申请前类型" align="center" />
                  <el-table-column prop="closed_return_amount" label="注销卡时退回金额" align="center" />
                  <el-table-column prop="createtime" label="申请时间" align="center" :formatter="formatterTime" width="180"/>
                  <el-table-column prop="is_settled" label="审核状态" align="center">
                      <template #default="scope">
                          <el-tag :type="scope.row.is_settled == 1 ? 'success' : scope.row.is_settled == 2 ? 'danger' : 'warning'">
                          {{ scope.row.is_settled == 1 ? "通过" : scope.row.is_settled == 2 ? "拒绝" : "待审核" }}
                          </el-tag>
                      </template>
                  </el-table-column>
                  <el-table-column prop="settled_user" label="审核人" align="center" />
                  <el-table-column prop="settled_time" label="审核时间" align="center" :formatter="formatterTime" width="180" />
                  <el-table-column label="操作" align="center" fixed="right">
                      <template #default="scope">
                          <el-button type="primary" plain
                              @click="handleOperate(scope.$index, scope.row, 'edit')"
                              v-if="scope.row.is_settled == 0"
                              >审核</el-button>
                      </template>
                  </el-table-column>
              </el-table>
              <div class="table-pagination">
                  <el-pagination
                      :current-page="pageable.pageNum"
                      :page-size="pageable.pageSize"
                      :page-sizes="[10, 25, 50, 100]"
                      :background="true"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="pageable.total"
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      ></el-pagination>
              </div>
          </div>
      </div>
      <DialogForm
          @cancel="cancel"
          @closeDialog="closeDialog"
          @submitForm="submit"
          :dialogFormVisible="dialogVisible"
          :dialogForm="dialogForm"
          :btnLoading="btnLoading"
          />
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { formatterTime, pickerDefaultTime, timestamp } from "@/utils/utils";
import { cardsOfflineOperateApi, cardsOfflineOperateReviewApi } from "@/api/payServerse/cards";
import DialogForm from "./components/operateForm.vue";

const loading = ref(false);
const tableData = ref([]);
const dialogVisible = ref(false);
const btnLoading = ref(false);
const btnType = ref(null);
const formData = {
    merchant_id: "",
    merchant_name: "",
    card_id: "",
    card_number: "",
    is_settled: "",
    timeData: []
};
const form = reactive({ ...formData });
const pageable = reactive({
    pageNum: 1,
    pageSize: 10,
    total: 0
});
const dialogFormData = {
    id: "",
    status: "",
    return_amount: ""
};
const dialogForm = reactive({ ...dialogFormData });
// 参数
const param = () => {
    return {
        page: pageable.pageNum,
        pagesize: pageable.pageSize,
        merchant_id: form.merchant_id,
        merchant_name: form.merchant_name,
        card_id: form.card_id,
        card_number: form.card_number,
        is_settled: form.is_settled,
        start: form.timeData[0] ? timestamp(form.timeData[0].valueOf()) : "",
        end: form.timeData[1] ? timestamp(form.timeData[1].valueOf()) : "",
    };
};
// 获取表格数据
const getTableData = async () => {
    loading.value = true;
    try {
        const res = await cardsOfflineOperateApi(param());
        loading.value = false;
        tableData.value = res.data.results;
        pageable.total = res.data.count;
    } catch (error) {
        loading.value = false;
    }
};
// 查询
const onQuery = () => {
    console.log("onQuery");
    getTableData();
};
// 重置
const onReset = () => {
    Object.assign(form, formData);
    getTableData();
};

//关闭弹窗
const closeDialog = () => {
    dialogVisible.value = false;
    btnType.value = null;
    Object.assign(dialogForm, dialogFormData);
};

// 取消
const cancel = () => {
    dialogVisible.value = false;
    btnType.value = null;
    Object.assign(dialogForm, dialogFormData);
};
// 提交
const submit = async param => {
    try {
        btnLoading.value = true;
        if (btnType.value == "edit") {
            //console.log(param);
            const res = await cardsOfflineOperateReviewApi(param);
            ElMessage({
                message: res.message,
                type: "success"
            });
        }
        dialogVisible.value = false;
        btnLoading.value = false;
        getTableData();
    } catch (error) {
        btnLoading.value = false;
    }
};

const handleOperate = async (index, row, type) => {
    // 编辑
    if (type === "edit") {
        btnType.value = "edit";
        Object.assign(dialogForm, { ...row });
        dialogVisible.value = true;
    }
};
// 条数
const handleSizeChange = number => {
    pageable.pageSize = number;
    getTableData();
};
// 页码
const handleCurrentChange = number => {
    pageable.pageNum = number;
    getTableData();
};
onMounted(() => {
    getTableData();
});
</script>
